<template>
	<view style="width: 100%;display: flex;justify-content: center;align-items: center;">
		<div class="is-loading" :style='"height:" + height'></div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:{
			avatar:{
				type:Boolean,
				default:false
			},
			height:{
				type:String,
				default:'20px'
			},
		},
		methods: {
			
		}
	}
</script>

<style>
 
        .is-loading {
            width: 100%;
			/* border: 1px solid #F0F0F0; */
			box-shadow: 0 0 1px 0 #F0F0F0;
			background-color: #fff;
            animation: loading 1.2s ease infinite;
            -webkit-animation: loading 1.2s ease infinite;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(25%, #f2f3f5), color-stop(37%, #ccc), color-stop(63%, #F0F0F0));
            background-image: -o-linear-gradient(left, #f2f3f5 25%, #F0F0F0 37%, #f2f3f5 63%);
            background-image: linear-gradient(135deg, #f2f3f5 25%, #F0F0F0 37%, #f2f3f5 63%);
            background-size: 400% 100%
        }
 
        @-webkit-keyframes loading {
            0% {
                background-position: 60% 50%
            }
 
            to {
                background-position: 0 50%
            }
        }
 
        @keyframes loading {
            0% {
                background-position: 60% 50%
            }
 
            to {
                background-position: 0 50%
            }
        }
    </style>
